<template>
  <div class="box">
    <el-card class="card">
      <div class="title">
        总数: {{ total }}
      </div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          align="center"
          prop="date"
          label="订单ID">
          <template slot-scope="scope">
            <div class="table_div">
              <p>{{scope.row.id}}</p>
              <!--              <p>gvhbjnmkl</p>-->
              <!--              <p>gvhbjnmkl</p>-->
              <!--              <img class="img" src="../../assets/img/huge.jpg" alt="">-->

            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="下单人信息">
          <template slot-scope="scope">
            <div class="table_div">
              <el-avatar shape="square" :size="50" :src="scope.row.avatar"></el-avatar>
              <p>{{scope.row.nickname}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="联系人信息">
          <template slot-scope="scope">
            <div class="table_div">
              <p>{{scope.row.name}}</p>
              <p>{{scope.row.mobile}}</p>
            </div>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--          align="center"-->
<!--          prop="address"-->
<!--          label="商品数据">-->
<!--          <template slot-scope="scope">-->
<!--            <div class="table_div" :key="item.id" v-for="(item) in scope.row.goodLists" >-->
<!--              <el-avatar shape="square" :size="50" :src="item.goodthumb"></el-avatar>-->
<!--              <p>商品名称:{{item.goodname}}</p>-->
<!--              <p>商品ID:{{item.goodid}}</p>-->
<!--              <p>商品数量:{{item.goodnum}}</p>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
          align="center"
          prop="address"
          label="抵扣积分/金额">
          <template slot-scope="scope">
            <div class="table_div">
              <p>{{scope.row.credit}}</p>
              <p>{{scope.row.creditmoney}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="地址">
          <template slot-scope="scope">
            <div class="table_div">
              <p>{{scope.row.province}}</p>
              <p>{{scope.row.city}}</p>
              <p>{{scope.row.area}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="订单最终支付价格">
          <template slot-scope="scope">
            <div class="table_div">
              <p>{{scope.row.price}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="订单小计">
          <template slot-scope="scope">
            <div class="table_div">
              <p>{{scope.row.price2}}</p>
            </div>
          </template>
        </el-table-column>

      </el-table>
      <div class="bottom">
        <!--        <el-button type="primary" @click="jumpAdd()" >新增项目</el-button>-->
        <el-pagination
          background
          :current-page="pageNum"
          :page-sizes="[3, 5, 10, 10000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { getOrderList } from '../../api/order'

  export default {
    name: 'orderList',
    data() {
      return {
        tableData: [], // 订单列表
        total: 0,
        pageSize: 10,
        pageNum: 1
      }
    },
    created() {
      this.getOrderList()
    },
    methods: {
      // 订单列表
      getOrderList() {
        const data = {
          pageNum: 1,
          pageSize: 10
        }
        getOrderList(data).then(res => {
          if (res.code == 0) {
            console.log('订单列表成功', res)
            this.tableData = res.data.list
            this.total = res.data.total
          }
        })
      },

      // 分页器
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getOrderList()
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.getOrderList()
        console.log(`当前页: ${val}`)
      }
    }
  }
</script>

<style scoped lang="less">
  .box {
    padding: 20px;

    .card {
      margin-bottom: 20px;
    }

    /*表格*/
    .table_div {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .img {
        width: 40px;
        height: 40px;
      }

    }

    /*total*/
    .title {
      margin: 10px 10px 30px 10px;
      padding: 10px 15px;
      background: #5f8ffe;
      color: white;
      border-radius: 10px;
    }

    /*分页器样式*/

    .bottom {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }


  }

</style>
